<template>
	<div v-loading="loading">
		<div class="layout-padding-auto layout-padding-view">
			<div>
				<el-row>
					<el-col :span="12">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>CPU</span>
								</div>
							</template>
							<el-table :data="cpuList">
								<el-table-column prop="attribute" label="属性" />
								<el-table-column prop="value" label="值" />
							</el-table>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>内存</span>
								</div>
							</template>
							<el-table :data="memList">
								<el-table-column prop="attribute" label="属性" />
								<el-table-column prop="memValue" label="内存" />
								<el-table-column prop="jvmValue" label="JVM" />
							</el-table>
						</el-card>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>服务器信息</span>
						</div>
					</template>
					<el-descriptions :column="2" border>
						<el-descriptions-item label="服务器名称" label-align="center" width="150px">{{ sys.computerName
						}}</el-descriptions-item>
						<el-descriptions-item label="操作系统" label-align="center" width="150px">{{ sys.osName
						}}</el-descriptions-item>
						<el-descriptions-item label="服务器IP" label-align="center" width="150px">{{ sys.computerIp
						}}</el-descriptions-item>
						<el-descriptions-item label="系统架构" label-align="center" width="150px">{{ sys.osArch
						}}</el-descriptions-item>
					</el-descriptions>
				</el-card>
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>Java虚拟机信息</span>
						</div>
					</template>
					<el-descriptions :column="2" border>
						<el-descriptions-item label="Java名称" label-align="center" width="150px">{{ jvm.name
						}}</el-descriptions-item>
						<el-descriptions-item label="Java版本" label-align="center" width="150px">{{ jvm.version
						}}</el-descriptions-item>
						<el-descriptions-item label="启动时间" label-align="center" width="150px">{{ jvm.startTime
						}}</el-descriptions-item>
						<el-descriptions-item label="运行时长" label-align="center" width="150px">{{ jvm.runTime
						}}</el-descriptions-item>
						<el-descriptions-item label="安装路径" label-align="center" width="150px">{{ jvm.home
						}}</el-descriptions-item>
						<el-descriptions-item label="项目路径" label-align="center" width="150px">{{ sys.userDir
						}}</el-descriptions-item>
					</el-descriptions>
				</el-card>
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>磁盘状态</span>
						</div>
					</template>
					<el-table :data="sysFiles">
						<el-table-column prop="dirName" label="盘符路径" />
						<el-table-column prop="typeName" label="文件系统" />
						<el-table-column prop="sysTypeName" label="盘符类型" />
						<el-table-column prop="total" label="总大小" />
						<el-table-column prop="free" label="可用大小" />
						<el-table-column prop="used" label="已用大小" />
						<el-table-column prop="usage" label="已用百分比" />
					</el-table>
				</el-card>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { getServer } from '/@/api/upms/sysserver';
interface Jvm {
	total: number;
	used: number;
	free: number;
	usage: number;
	name: string;
	version: string;
	startTime: string;
	runTime: string;
	home: string;
}
interface Sys {
	computerName: string;
	osName: string;
	computerIp: string;
	osArch: string;
	userDir: string;
}
interface DataState {
	cpuList: Array<any>;
	jvm: Jvm;
	memList: Array<any>;
	sys: Sys;
	sysFiles: Array<any>;
}
export default defineComponent({
	setup() {
		const data = reactive<DataState>({
			cpuList: [],
			jvm: { total: 0, used: 0, free: 0, usage: 0, name: '', version: '', startTime: '', runTime: '', home: '' },
			memList: [],
			sys: { computerName: '', osName: '', computerIp: '', osArch: '', userDir: '' },
			sysFiles: [],
		});
		const loading = ref(false);
		const initPage = () => {
			loading.value = true;
			getServer()
				.then((response: any) => {
					data.sysFiles = response.data.data.sysFiles;
					let cpu = response.data.data.cpu;
					let mem = response.data.data.mem;
					data.jvm = response.data.data.jvm;
					data.sys = response.data.data.sys;
					data.cpuList = [
						{ attribute: '核心数', value: cpu.cpuNum },
						{ attribute: '用户使用率', value: cpu.used },
						{ attribute: '系统使用率', value: cpu.sys },
						{ attribute: '当前空闲率', value: cpu.free },
					];
					data.memList = [
						{
							attribute: '总内存',
							memValue: mem.total,
							jvmValue: data.jvm.total,
						},
						{
							attribute: '已用内存',
							memValue: mem.used,
							jvmValue: data.jvm.used,
						},
						{
							attribute: '剩余内存',
							memValue: mem.free,
							jvmValue: data.jvm.free,
						},
						{
							attribute: '使用率',
							memValue: mem.usage,
							jvmValue: data.jvm.usage,
						},
					];
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		initPage();
		return {
			loading,
			...toRefs(data),
		};
	},
});
</script>
